<template>
  <header class="header">
    <div class="left">
      <img class="logo" src="../../assets/logo.png" alt="">
      <h2>TCL用户运营平台</h2>
      <img class="beta" src="../../assets/beta.png" alt="">
    </div>
    <el-menu ref="menu" class="top-menu" mode="horizontal" :default-active="lv3MenuId.toString()">
      <el-submenu v-for="menu in menu" :index="menu.id.toString()" :key="menu.id">
        <template slot="title">{{menu.name}}</template>
        <el-menu-item v-for="subMenu in menu.child" :index="subMenu.id.toString()" :key="menu.child.id" @click="handleClick(menu.id, subMenu.id)">
          {{subMenu.name}}
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </header>
</template>
<script>
  import {mapState, mapMutations} from 'vuex'
  import mapUrl from '@/router/menuUrl'
  export default{
    props: ['topMenu'],
    computed: {
      ...mapState(['menu', 'lv3MenuId'])
    },
    methods: {
      ...mapMutations(['SET_LV2_MENU', 'SET_LV3_MENU', 'SET_LV3_ID']),
      handleClick (lv2Id, lv3Id) {
        this.SET_LV2_MENU(lv2Id)
        this.SET_LV3_MENU(lv3Id)
        if (this.menu) {
          if (!this.menu[lv2Id]['child'][lv3Id].child) {
            this.$router.push(mapUrl[lv3Id])
          } else {
            const keys = Object.keys(this.menu[lv2Id]['child'][lv3Id].child)
            const defaultId = this.menu[lv2Id]['child'][lv3Id].child[keys[0]].id
            this.$router.push(mapUrl[defaultId])
            this.$nextTick(() => {
              this.SET_LV3_ID(defaultId)
            })
          }
        }
      }
    }
  }
</script>
